$color: #b532e9;

.comment {
  display: flex;
  flex-direction: column;
  .top-box {
    position: relative;
    width: 100%;
    height: 40vw;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover; // 指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框
    }
    .tab-wrap {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -6vw;
      width: 90%;
      height: 12vw;
      border-radius: 1.5vw;
      background: #fff;
      box-shadow: 0.8vw 0.533vw 2.667vw rgba(45,45,45,.15);
    }
  }
  .content {
    position: relative;
    flex: 1;
    margin: 6vw 2vw 0;
    .content-scroll {
      position: absolute;
      top: 1vw;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      .container {
        .goods-list {
          .goods-item {
            display: flex;
            padding: 1rem 0;
            .goods-img {
              flex-basis: 30%;
              img {
                width: 100%;
                height: 100%;
                box-shadow: 0 2px 8px #f0f1f2;
              }
            }
            .goods-name {
              flex: 1;
              width: 0;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding-left: 1rem;
              p {
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .comment-btn {
                align-self: flex-end;
                color: $color;
                padding: 1.3vw 2.5vw;
                border-radius: 5vw;
                border: 1px solid $color;
                span { padding-left: 1vw; }
              }
            }
          }
        }
      }
    }
  }
}